﻿<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Select TValue="string" Items="@Items2" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Items="@Items1" />
    </div>
</div>

@code {
    private List<SelectedItem> Items1 { get; set; } = new List<SelectedItem>();

    private readonly List<SelectedItem> Items2 = new SelectedItem[]
    {
        new SelectedItem ("", "请选择 ..."),
        new SelectedItem ("Beijing", "北京") { Active = true },
        new SelectedItem ("Shanghai", "上海"),
        new SelectedItem ("Hangzhou", "杭州")
    }.ToList();

    /// <summary>
    /// 级联绑定菜单
    /// </summary>
    /// <param name="item"></param>
    private async Task OnCascadeBindSelectClick(SelectedItem item)
    {
        // 模拟异步获取数据源
        await Task.Delay(100);
        if (item.Value == "Beijing")
        {
            Items1 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","朝阳区") { Active = true },
                new SelectedItem("2","海淀区")
            });
        }
        else if (item.Value == "Shanghai")
        {
            Items1 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","静安区"),
                new SelectedItem("2","黄浦区") {Active = true },
            });
        }
        else
        {
            Items1 = new List<SelectedItem>();
        }
        StateHasChanged();
    }
}
